
<template>
  <div class="app-container" v-loading="loading">
    <el-form
        ref="queryRef"
        :inline="true"
        :model="queryParams"
        class="form-box"
    >
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="退货订单"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-select
                clearable
                placeholder="退货状态"
                v-model="queryParams.orderStatus"
            >
              <template v-for="(item,index) in erp_customer_return_status" :key="index">
                <el-option :label="item.label" :value="item.value"></el-option>
              </template>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="关联订单号"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="关联订子单号"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="SKU编码"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="商品名称"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="退货快递"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="运单号"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="收货人"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item >
            <el-input
                v-model="queryParams.goodsName"
                clearable
                placeholder="手机号"

            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList">查询</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <vxe-table style="margin-top: 10px"
               :data="tableData"
               :height="tableHeight"
               align="center"
               border
               :row-config="{isCurrent: true, isHover: true}"
    >
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="goodsName"  width="150" title="采购单号">
      </vxe-column>
      <vxe-column field="goodsCode"  width="100" title="退货状态"></vxe-column>
      <vxe-column field="goodsName"  width="150" title="SKU编码" ></vxe-column>
      <vxe-column field="goodsName"  width="200" title="商品名称" ></vxe-column>
      <vxe-column field="attr3" title="商品图片">
        <template #default>
          <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="50">
        </template>
      </vxe-column>
      <vxe-column field="companyName"  width="150" title="公司名称" ></vxe-column>
      <vxe-column field="warehouseName" width="150" title="仓库名称"></vxe-column>
      <vxe-column field="goodsName"  width="100" title="退货数量" ></vxe-column>
      <vxe-column field="goodsName"  width="120" title="退货方式" ></vxe-column>
      <vxe-column field="goodsName"  width="120" title="质检人" ></vxe-column>
      <vxe-column field="goodsName"  width="150" title="质检时间" ></vxe-column>
      <vxe-column  title="操作" >
        <template #default="{row}">
          <el-button
              type="text"
              style="color:green"
              @click="changeTag(row)"
          >查看
          </el-button>
        </template>
      </vxe-column>
    </vxe-table>
    <pagination
        v-show="total > 0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
    />

  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from "vue";

const {proxy} = getCurrentInstance();
const { erp_customer_return_status } = proxy.useDict("erp_customer_return_status");

let loading=ref(false)
let queryParams=ref({
  pageNum: 1,
  pageSize: 10,
})
const tableData=ref([])
const total=ref(0)
let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 360;
  })
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 360;
  }
  // getList()
})

function getList(){}

const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  getList();
};
</script>

<style scoped lang="scss">

</style>